<template>
  <el-dialog
    v-model="dialogFormVisible"
    class="global-dialog"
    :title="title"
    width="600px"
    draggable
    overflow
    @close="close"
  >
    <!-- 内容 start -->
    <div class="mt-[2%] px-3">
      <el-tabs type="border-card">
        <el-tab-pane label="菜单权限">菜单权限</el-tab-pane>
        <el-tab-pane label="按钮权限">按钮权限</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 内容 end -->
    <!-- 操作 -->
    <div class="text-right mt-[2%]">
      <el-button
        color="#1E3485"
        icon="Select"
        size="small"
        @click="onConfirm"
      >保存</el-button
      >
      <el-button icon="CloseBold" size="small" @click="close"
      >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script lang="ts">
  import {
    defineComponent, ref, watch, getCurrentInstance,
  } from 'vue'

  export default defineComponent({
    name: 'EditDialog',
    components: {
    },
    expose: ['open', 'close', 'dialogFormVisible'],
    emits: ['confirm', 'cancel', 'close', 'register'],
    setup(props, { emit }) {


      const isLoading = ref(false)
      const dialogFormVisible = ref(false)
      const instance = getCurrentInstance()
      const title = ref('角色权限设置')
      const open = () => {
        dialogFormVisible.value = true
      }
      const close = () => {
        dialogFormVisible.value = false
        emit('close')
      }

      const loading = () => {
        isLoading.value = false
      }
      const done = () => {
        formModule.resetField()
        loading()
      }
      const onConfirm = () => {
        isLoading.value = true
        formModule.submitForm().then((form) => {
          emit('confirm', form, done)
        }).catch(() => {
          loading()
        })
      }

      emit('register', instance)

      return {
        title,
        dialogFormVisible,
        open,
        close,
        onConfirm,
      }
    },
  })
</script>
